<template>
	<div ref="chartTime2" :style="{ width: '25rem', height: '210px' }"></div>
	<!-- <div ref="chartTime2" :style="{ height, width }"></div> -->
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
	name: 'bar',
	props: {
		chartData: {
			type: Array,
			default: () => [],
		},
		option: {
			type: Object,
			default: () => ({}),
		},
		width: {
			type: String as PropType<string>,
			default: '100%',
		},
		height: {
			type: String as PropType<string>,
			default: '280px',
		},
		seriesColor: {
			type: String,
			default: '#333',
		},
	},
	setup(props) {
		const chartTime2 = ref<HTMLDivElement | null>(null);
		const { setOptions, resize } = useECharts(chartTime2 as Ref<HTMLDivElement>);

		// let legend = props.chartData.map((item) => {
		//   return item.name;
		// });

		let seriesData = props.chartData;
		let legendColor = props.seriesColor;

		let barColor = ['#8bc353', '#e09f31', '#30e8bb', '#ddcc0e', '#1f94ff'];

		let serie = [];

		seriesData.forEach((item, index) => {
			let data = [];
			for (let i = 0; i < seriesData.length; i++) {
				data.push(0);
			}
			data[index] = item.value;
			serie.push({
				name: item.name,
				type: 'bar',
				stack: 'a',
				coordinateSystem: 'polar',
				barWidth: 12, // 10条数据的时候 10
				// barGap: 10,
				data: data,
				itemStyle: {
					color: barColor[index],
				},
			});
		});
		const option = reactive({
			angleAxis: {
				// 极坐标系的角度轴，用于定义极坐标系下的角度轴。
				type: 'value',
				min: 0,
				max: function (value) {
					return value.max + value.max / 2;
				}, // 最大值

				axisLine: {
					// 坐标轴线
					show: false,
				},
				axisTick: {
					// 坐标轴刻度
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
			},
			radiusAxis: {
				// 极坐标系下的半径轴，用于定义极坐标系下的半径轴。
				type: 'category',
				data: seriesData.map((item) => {
					return item.name;
				}),
				z: 1,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					// 坐标轴刻度标签的相关设置。
					interval: 0,
					color: '#fff', // 坐标轴刻度标签的文字颜色
					align: 'left',
					margin: 75,
					fontSize: 14,
					fontWeight: 'bold',
				},
			},
			polar: {
				center: ['25%', '50%'],
				radius: ['20%', '80%'],
			},
			series: serie,
			legend: {
				top: '20%',
				right: '1%',
				orient: 'vertical',
				itemWidth: 5,
				itemHeight: 5,
				icon: 'rect',
				formatter: function (name) {
					let total = 0;
					seriesData.forEach((item) => {
						total += item.value;
					});
					if (seriesData.length) {
						const item = seriesData.filter((item1) => item1.name == name)[0];
						// console.log('item', item);
						return `{name|${name}：}{value| ${item.value}} {rate| ${(100 * (item.value / total)).toFixed(2) + '%'}}`;
					}
				},
				textStyle: {
					color: '#fff',
					rich: {
						name: {
							color: '#F7FAFF',
							fontSize: 14,
							fontWeight: 'bold',
							padding: [0, 20, -1, 0], //上右下左
							width: 45,
						},
						value: {
							align: 'left',
							color: '#33b3ab',
							fontSize: 14,
							fontWeight: 'bold',
							padding: [0, 10, 1, 0],
							width: 45,
						},
						rate: {
							align: 'right',
							color: '#e8c73e',
							fontSize: 14,
							fontWeight: 'bold',
							padding: [0, 0, 1, 0],
						},
					},
				},
				shadowBlur: 10,
				show: true,
				z: 200,
				data: seriesData.map((item) => item.name),
			},
		});

		watchEffect(() => {
			props.chartData && initCharts();
		});

		function initCharts() {
			if (props.option) {
				Object.assign(option, cloneDeep(props.option));
			}
			// let seriesData = props.chartData.map((item) => {
			//   return item.value;
			// });
			// let xAxisData = props.chartData.map((item) => {
			//   return item.name;
			// });
			// option.series[0].data = seriesData.reverse();
			// console.log(option.series[0].data, 'option.series[0].data ');
			// option.radiusAxis.data = seriesData.reverse();
			// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

			// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

			setOptions(option);
		}
		onMounted(() => {
			window.addEventListener('resize', function () {
				console.log('resize');
				resize();
			});
		})
		return { chartTime2 };
	},
});
</script>
